import { constantRoutes, asyncRoutes } from '@/router'
import router from '@/router'
const state = {
  allRoutes: [...constantRoutes]
  // 默认有所有静态路由
}
const mutations = {
  setAllRoutes (state, value) {
    state.allRoutes = value
  }
}
const actions = {
  // 定义方法用于动态路由匹配
  //   1:什么时候调用(登陆后)  2:在哪调用(导航守卫)
  getUserRoutes ({ rootState, commit }) {
    /*
      store:{          
        state:当前模块的state
        commit:调用mutations
        dispatch:调用actions
        getters:当前模块的getters
        rootState:顶级模块的state    
        rootGetters:顶级模块的getters
    }
    
    */
    // 1:动态路由asyncRoutes      2:用户信息下的路由数组 rootState.模块名(user).字段名(userInfo).roles.menus
    let _menus = rootState.user.userInfo.roles.menus
    let _newArr = asyncRoutes.filter(item => {
      return _menus.includes(item.name)
    })
    _newArr.push({ path: '*', redirect: '/404', hidden: true })
    /*
    添加动态路由:
     1:添加后的路由不能立马使用
       在addRoutes后,再走一次导航守卫 ,它就可以生效了
     2:404影响
        注意404在addRoutes添加路由生效前,它已配制到相应路由会跳转至404,影响功能
        处理方式:把404的匹配放到addRoutes就可以了
     3:菜单坑点
        this.$router.options.routes不是响应式的数据,使用了vuex中的路由配制数据
     4:切换帐号时,上一个帐号的路由配制还保留着在router内,退出 时应该清空(重置路由)
       在vuex中写好退出 登陆时vuex要做的操作,加一个重置路由处理,
       在任何能出 登陆的地方都调用该vuex方法就可以了
    */

    router.addRoutes(_newArr)
    commit('setAllRoutes', [...constantRoutes, ..._newArr])
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
